@import '../style/theme/color';
@import '../style/theme/variables';
@import '../style/mixins/index';

.devui-pagination {
  .total-size {
    color: $dark2;
  }

  .pagination {
    li:not(.disabled) {
      a:hover,
      a:focus {
        background: $focus3;
      }

      .pagination-link:hover svg path {
        fill: $status-blue;
      }
      a {
        color: $dark2;
      }

      &.active a {
        background: $focus1;
        color: $white;
        &:hover {
          background: $hover-control;
          color: $white;
        }
        &:focus,
        &:active {
          background: $focus2;
          color: $white;
        }
      }
    }
    li.active.disabled a {
        background-color: $gray2;
    }

    .pagination-link {
      svg {
        path {
          fill: $dark2;
        }
      }
    }
  }
  .pagination > li:first-child > a,
  .pagination > li:last-child > a {
    border-color: $gray2;
    color: $gray1;
  }



  .jump-button {
    border-color: $gray1;
    &:hover {
      border-color: $hover-control;
      .go{
        border-left-color: $hover-control;
      }
    }
    .go {
      border-top-color: transparent;
      border-left-color: $dark2;
      border-bottom-color: transparent;
    }
  }
}
